<script setup>
import {computed, onMounted, ref} from "vue";
import {getPage, saveRow, updateRow, removeRow} from "@/api/web/tenantDept";
import {ElMessage, ElMessageBox} from "element-plus";
import {getTree} from "@/api/web/tenantCompany.js";

const option = ref(null)
const data = ref([])
const selectionList = ref([])
const crudRef = ref(null)
const form = ref({})
const query = ref({
  scs: '',
  keyword: '',
  kcs: ''
})
const page = ref({
  pageSize: 10,
  currentPage: 1,
  total: 0
})
const companyDict = ref([])
const loading = ref(false)
option.value = {
  height: 'auto',
  calcHeight: 30,
  tip: false,
  menuWidth: 400,
  border: true,
  index: true,
  viewBtn: true,
  selection: true,
  column: [
    {
      label: "名称",
      prop: "name",
      type: "input",
    },
    {
      label: "公司",
      prop: "companyKey",
      type: "cascader",
      emitPath: false,
      dicData: companyDict,
    },
  ]
}

onMounted(()=>{
  getTree().then(res => {
    companyDict.value = res.data.data
  })
})

const rowUpdate = (row, index, done, loading) => {
  updateRow(row).then(() => {
    onLoad(page.value);
    ElMessage({
      type: 'success',
      message: '操作成功'
    })
    done();
  }, error => {
    loading();
    window.console.log(error);
  });
}

const rowSave = (row, done, loading) => {
  saveRow(row).then(() => {
    refreshChange()
    ElMessage({type: 'success', message: '添加成功'})
    done()
  }, error => {
    console.log(error);
    loading();
  })
}

const rowDel = (row) => {
  ElMessageBox.confirm(
      '此操作将永久删除该数据, 是否继续?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
        removeRow({ids: row.id}).then(() => {
          ElMessage({type: 'success', message: '删除成功'})
          refreshChange()
        })
      })
      .catch(() => {
        ElMessage({type: 'info', message: '已取消删除'})
      })
}

const searchChange = (params, done) => {
  query.value = params;
  page.value.currentPage = 1
  onLoad(page.value, query.value);
  done();
}

const searchReset = () => {
  query.value = {
    scs: '',
    keyword: '',
    kcs: ''
  };
  refreshChange()
}

const selectionChange = (list) => {
  selectionList.value = list;
}

const refreshChange = () => {
  onLoad(page.value, query.value);
}

const selectionClear = () => {
  selectionList.value = [];
  crudRef.value.toggleSelection();
}

const onLoad = (pageParam, params = {}) => {
  loading.value = true;
  params.currentPage = pageParam.currentPage
  params.pageSize = pageParam.pageSize
  getPage(Object.assign(params, query.value)).then(res => {
    const dataRes = res.data.data;
    page.value.total = Number(dataRes.total);
    data.value = dataRes.records;
    loading.value = false;
    selectionClear();
  });
}

const handleDelete = () => {
  if (selectionList.value.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选择至少一条数据'
    })

    return;
  }
  ElMessageBox.confirm(
      '确定将选择数据删除?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    console.log("确定")
    removeRow({ids: ids.value}).then(() => {
      ElMessage({type: 'success', message: '已删除'})
      crudRef.value.toggleSelection()
      refreshChange()

    })
  }).catch(() => {
    ElMessage({type: 'info', message: '已取消删除'})
  })
}

const ids = computed(() => {
  let ids = [];
  selectionList.value.forEach(ele => {
    ids.push(ele.id);
  });
  return ids.join(",");
})
</script>

<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               v-model:page="page"
               v-model="form"
               ref="crudRef"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template #menu-left>
        <el-button type="danger"
                   icon="el-icon-delete"
                   plain
                   @click="handleDelete">删 除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<style scoped lang="scss">

</style>